<template>
  <el-dialog
    :show-close="false"
    custom-class="share-wrapper"
    width="356px"
    :visible="visible"
    :before-close="handleClose"
  >
    <i class="el-icon-close close" @click="handleClose"></i>
    <div class="share-body" v-if="!$util.isEmpty(shareData)">
      <div class="teacher-info">
        <template v-if="shareType === 1 || shareType === 2">
          <el-avatar :size="56" :src="userInfo.avatar_url"></el-avatar>
          <div class="name">{{ userInfo.nick_name }}</div>
        </template>
        <template v-else-if="shareType === 11 || shareType === 12">
          <el-avatar :size="56" :src="shareData.teacher_avatar"></el-avatar>
          <div class="name">{{ shareData.teacher_name }}</div>
        </template>
        <div class="desc">邀您一起学习</div>
      </div>
      <div class="share-conter">
        <div class="course-info">
          <div class="image">
            <edu-image :src="shareData.cover_url"></edu-image>
          </div>
          <div class="name">{{ shareData.course_title }}</div>
          <div>
            <span class="price">{{ shareData.course_price | formatMoney }}</span>
            <span class="scribing">{{ shareData.scribing_price | formatMoney }}</span>
          </div>
        </div>
        <div class="share-code">
          <vue-qr :text="`${shareData.share_url_h5}`" :size="72" :margin="0"></vue-qr>
        </div>
        <div class="desc">长按识别二维码开始学习</div>
      </div>
      <div class="mhm-name">
        {{ `本课程由${shareData.mhm_title}提供` }}
      </div>
    </div>
    <div class="share-footer" v-if="!$util.isEmpty(shareData)">
      <div class="share-btn">
        <div class="item" v-clipboard:copy="copyUrl" v-clipboard:success="handleCopySuccess">
          <el-image :src="require('@/assets/images/share/share_link_icon.png')"></el-image>
          <span>分享链接</span>
        </div>
      </div>
      <div class="profit">
        每成功邀请一名用户预计最多收入<span>{{ shareData.max_profit | formatMoney }}</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import projectSetting from '@/settings/projectSetting.js'
import vueQr from 'vue-qr'
import { mapState } from 'vuex'
export default {
  components: {
    vueQr
  },
  props: {
    pintuan_data: Object
  },
  data() {
    return {
      url: `${projectSetting.globLocalHost}`
    }
  },
  computed: {
    ...mapState({
      shareData: state => state.promotion.shareData,
      shareType: state => state.promotion.shareType,
      visible: state => state.promotion.shareVisible,
      userInfo: state => state.user.info
    }),
    copyUrl() {
      if (this.shareType == 1) {
        return `${this.url}/course/${this.$route.params.id}?share_code=${this.shareData.share_code}`
      } else if (this.shareType == 11) {
        return `${this.url}${this.$route.path}?share_code=${this.shareData.share_code}&tuan_id=${this.pintuan_data.id}`
      } else {
        return `${this.url}${this.$route.path}?share_code=${this.shareData.share_code}`
      }
    }
  },
  methods: {
    // 关闭
    handleClose() {
      this.$store.commit('promotion/SET_SHARE_VISIBLE', false)
    },
    handleCopySuccess() {
      this.$message.info('复制成功')
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .share-wrapper .el-dialog__header,
::v-deep .share-wrapper .el-dialog__body {
  padding: 0;
}
.close {
  position: absolute;
  top: -20px;
  right: 0;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}
.share-wrapper {
  .share-body {
    margin-top: -1px;
    padding: 16px 23px 8px;
    background-image: url('../../../assets/images/share/share_bg.png');
    background-size: 100% 100%;
    .teacher-info {
      text-align: center;
      .name,
      .desc {
        font-weight: 500;
        color: #ffffff;
      }
      .name {
        margin-top: 8px;
        font-size: 15px;
        @include ellipsis();
      }
      .desc {
        font-size: 12px;
      }
    }
    .share-conter {
      margin-top: 6px;
      padding: 20px 15px;
      background-image: url('../../../assets/images/share/centerwhite_bg.png');
      background-size: 100% 100%;
      .desc {
        margin: 10px auto 0;
        width: 154px;
        height: 24px;
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
        text-align: center;
        background: linear-gradient(122deg, #73a4ff 0%, #6575ff 100%);
        border-radius: 37px;
      }
    }
    .course-info {
      .image {
        position: relative;
        height: 0;
        padding-top: 155px;
        border-radius: 10px;
        overflow: hidden;
        .el-image {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }
      .name {
        margin-top: 8px;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 500;
        color: $text-color-import;
        @include ellipsis();
      }
      .price {
        font-size: 18px;
        font-weight: bold;
        color: $text-color-price;
      }
      .scribing {
        margin-left: 4px;
        font-size: 14px;
        font-weight: bold;
        color: $text-color-auxiliary;
        text-decoration: line-through;
      }
    }
    .share-code {
      margin-top: 8px;
      margin: 8px auto 0;
      width: 80px;
      padding: 4px;
      background: #e6f1fc;
      border-radius: 4px;
      box-sizing: border-box;
      display: flex;
    }
    .mhm-name {
      margin-top: 6px;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      @include ellipsis();
    }
  }
  .share-footer {
    margin-top: 16px;
    padding-bottom: 8px;
    .profit {
      margin-top: 10px;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      color: #5191ff;
      span {
        font-weight: 400;
        color: $text-color-price;
      }
    }
    .share-btn {
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #ffffff;
      border-radius: 28px 28px 0 0;
      .item {
        display: flex;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
        span {
          margin-top: 2px;
          font-size: 12px;
          font-weight: 400;
          color: #888888;
        }
      }
    }
  }
}
</style>
